<template>
  <div class="back">
    <div class="download-tip" @click="clickBack">
      <img src="../../../public/images/backtop.png" alt />
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({}),
  created () {},
  mounted () {
    window.addEventListener('scroll', this.backTop)
  },
  destroyed () {
    window.removeEventListener('scroll', this.backTop)
  },
  methods: {
    backTop () {
      let scrollTop = document.documentElement.scrollTop
      if (scrollTop >= window.screen.height - 200) {
        document.getElementsByClassName('back')[0].style.display = 'block'
      } else {
        document.getElementsByClassName('back')[0].style.display = 'none'
      }
    },
    clickBack () {
      document.documentElement.scrollTop = 0
    }
  }
}
</script>
<style lang="less" scoped>
.back {
  display: none;
  .download-tip {
    display: block;
    position: fixed;
    right: 16px;
    bottom: 100px;
    width: 40px;
    height: 40px;
    background-size: contain;
    border-radius: 50%;
    z-index: 10;
    img {
      width: 40px;
    }
  }
}
</style>
